<!DOCTYPE html>
<!--[if lt IE 7]><html class="lt-ie10 lt-ie9 lt-ie8 lt-ie7 ie6"> <![endif]-->
<!--[if IE 7]><html class="lt-ie10 lt-ie9 lt-ie8 ie7"> <![endif]-->
<!--[if IE 8]><html class="lt-ie10 lt-ie9 ie8"> <![endif]-->
<!--[if IE 9]><html class="lt-ie10 ie9"><![endif]-->
<!--[if gt IE 9]><!--><html> <!--<![endif]-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <link rel="stylesheet" href="http://www.12301.cc/css/common/www.12301.cc.global.css"/>
    <link rel="stylesheet" href="http://www.12301.cc/tpl/ui/common/ui_common.css"/>
    <script type="text/javascript" src="http://www.12301.cc/js/jquery-1.7.2.min.js"></script>
<!--    <script type="text/javascript" src="http://wx.12301.cc/public/js/common/class.js"></script>-->
    <script type="text/javascript" src="http://wx.12301.cc/public/js/build/common.min.js"></script>
</head>
<body>
<div id="mySelect" class="ui-container ui-select">
    <div class="con border shadow">
        <input class="ui-textInp noborder nobackground selectInp" readonly type="text" name="" id=""/>
        <a class="ui-cs-toggleBtn" href="javascript:void(0)"><i class="iconfont down">&#xe673;</i><i class="iconfont up">&#xe695;</i></a>
    </div>
    <script type="text/template">
        <li class="option" data-id="<%=id%>"><%=text%></li>
    </script>
</div>

<script type="text/javascript">
    /**
     * EVENTS
     *  - "switch" : 切换下拉框时
     *  - "open"   : 打开下拉框时
     *  - "close"  : 关闭下拉框时
     */
    var UI_Select = RichBase.extend({
        statics : {},
        EVENTS : {
            "click" : {
                ".ui-cs-toggleBtn" : "onToggleBtnClick"
            }
        },
        init : function(opt){
            var that = this;
            var container = this.container = opt.container;
            var id = this.id = container.attr("id");
            this.data = opt.data;
            this.ajax = !!opt.ajax;
            this.tpl = opt.tpl;
            this.tarOption = null;
            this.input = container.find(".selectInp");
            this.downWrap = $('<div style="display:none" id="'+id+'_downWrap" class="ui-select-downWrap ui-page"><ul class="ui-select-downUl"></ul></div>').appendTo($("body"));
            this.downWrap.on("click",function(e){
                that.hideDownUl();
                return false;
            })
            this.downWrap.children().on("click",".ui-option",function(e){
                var tarOption = $(e.currentTarget);
                var text = tarOption.text();
                tarOption.addClass("active").text(text).siblings().removeClass("active");
                that.tarOption = tarOption;
                that.hideDownUl();
                return false;
            })
            if(this.data && !this.ajax && this.tpl) this.buildOption();
        },
        onToggleBtnClick : function(that,e){
            var tarBtn = $(e.currentTarget);
            tarBtn.toggleClass("active");
            var on = !!tarBtn.hasClass("active");
            that.fire("switch",{on:on});
            on ? that.showDownUl() : that.hideDownUl();
        },
        posDownUl : function(){
            var downWrap = $("#"+this.id+"_downWrap");
            var listUl = downWrap.find(".ui-select-downUl");
            var container = this.container;
            var offset = container.offset();
            var selH = container.height();
            listUl.css({
                position : "absolute",
                left : offset.left,
                top : offset.top + selH,
                width : container.width()
            })
        },
        buildOption : function(){
            var that = this;
            var data = this.data;
            var tpl = this.tpl;
            var html = "";
            for(var i in data){
                var d = data[i];
                html += that.parseTemplate(tpl,d);
            }
            this.downWrap.find(".ui-select-downUl").html(html);
            setTimeout(function(){
                that.posDownUl();
            },10)
        },
        showDownUl : function(){
            this.downWrap.show().addClass("show");
            this.fire("open");
        },
        hideDownUl : function(){
            this.downWrap.hide().removeClass("show");
            this.fire("close");
        },
        getOption : function(){
            return this.tarOption;
        }
    });

    new UI_Select({
        container : $("#mySelect"),
        ajax : false,
        tpl : '<li class="ui-option" data-id="<%=id%>"><%=text%></li>',
        data : [{
            id : "1",
            text : "option1"
        },{
            id : "2",
            text : "option2"
        },{
            id : "3",
            text : "option3"
        }]
    });



</script>

</body>
</html>